<template>
	<zkView ref="zkView" v-slot:uContainer>
		<view class="container" v-if="proDetail._id">
			<image class="thumb" mode="widthFix" :src="proDetail.thumbs[0]||'/static/placeholder.png'"></image>
			<view class="highlight">
				<view class="price">
					<view v-if="spuSel&&spuSel.name">
						<text>优惠后￥</text>
						<rich-text :nodes="formatPrice(spuSel.price_sale*proNum,2)" />
						<text>，优惠前￥</text>
						<rich-text :nodes="formatPrice(spuSel.price_original*proNum)" />
					</view>
					<view><text>已售{{proDetail.sales_volume}}+</text></view>
				</view>
				<view class="label" v-if="proDetail.type===2">
					<view><text>今日特惠</text></view>
					<view><text v-for="(t,i) in seckillTime" :key="i">{{t}}</text></view>
				</view>
				<view class="label" v-if="proDetail.type===1">
					<view><text>品质新品</text></view>
				</view>
			</view>
			<view class="proTitle">
				<text>{{proDetail.name}}</text>
			</view>
			<view class="spu">
				<view class="spuTitle">规格</view>
				<view v-for="spuItem in proDetail.spu" :key="`spu_${spuItem.name}`"
					:class="`spuItem ${spuSel.name===spuItem.name?'activeItem':''}`" @click="spuChange(spuItem)">
					<text>{{spuItem.name}} ￥</text>
					<rich-text :nodes="formatPrice(spuItem.price_sale)" />
					<text v-for="tag in spuItem.tag" :key="tag">{{tag}}</text>
				</view>
			</view>
			<view class="spuNum">
				<view class="spuTitle">数量</view>
				<view class="num">
					<uni-icons type="minus-filled" size="44rpx" @click="proNumMinus()"></uni-icons>
					<text>{{proNum}}</text>
					<uni-icons type="plus-filled" size="44rpx" @click="proNumPlus()"></uni-icons>
				</view>
			</view>
			<view class="spuPostage">
				<view class="spuTitle">邮费</view>
				<view class="postage">
					<text>包邮</text>
				</view>
			</view>
			<view class="spuSecurity">
				<view class="spuTitle">保障</view>
				<view class="security">
					<text>品质保证</text>
					<text>破损包退</text>
					<text>极速退款</text>
				</view>
			</view>
			<view class="details">
				<view class="detailTitle">宝贝详情</view>
				<view class="detailImg">
					<image mode="widthFix" v-for="pic in proDetail.details" :key="pic" :src="pic||'/static/placeholder.png'">
					</image>
				</view>
			</view>
			<view class="noMore">
				<text>触到底线了哦~</text>
			</view>
			<view class="fixBottom">
				<view class="fbLeft">
					<uni-icons type="chatbubble" size="44rpx" @click=""></uni-icons>
					<text>客服</text>
				</view>
				<view class="fbRight">
					<view class="cartBtn" @click="addToCart()">
						<text>加入购物车</text>
					</view>
					<view class="bookingBtn" @click="forBooking()">
						<text>立即购买</text>
					</view>
				</view>
			</view>
		</view>
	</zkView>
</template>

<script>
	import indexJs from './index.js';
	import mixins from '@/common/mixins.js';
	export default {
		components: {},
		mixins: [mixins],
		...indexJs
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>